<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    .box {
        width: 300px;
        height: 300px;
        background: red;
        text-align: center;
        line-height: 300px;
    }

    .box1 {
        width: 300px;
        height: 40px;
        background: yellow;
        text-align: center;
        line-height: 40px;
    }
</style>

<body>
    <!-- <ul class="nm_ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul> -->
    <!-- <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li id="nav">5</li>
        <li>6</li>
        <li class="nav">7</li>
        <li>8</li>
        <li>9</li>
    </ul> -->
    <button>显示</button>
    <button>显示或隐藏</button>
    <button>隐藏</button>
    <div class="box1">点我变大</div>
    <div class="box">点我变大我就变大了</div>
</body>
<script>
    $(function () {
        // var li_1 = $('<li></li>')
        // var li_2 = $('<li></li>')
        // li_1.html('li1')
        // li_2.html('li2')

        // var parent = $('.nm_ul')
        // parent.append(li_1)
        // parent.append(li_2)


        // console.log($('ul').children())
        // console.log($('ul').children('#nav'));
        // console.log($('ul').find('#nav'));

        // console.log($("li").parent());
        // console.log($("li").parents())
        // console.log($("li").parents('.nav'))
        // console.log($("li").contents());





        // 1. 创建节点
        //创建两个<li>元素
        // var $li_1 = $("<li></li>"); // 创建第一个<li>元素
        // var $li_2 = $("<li></li>"); // 创建第二个<li>元素

        // var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
        // $parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
        // $parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

        // // 2. 子节点
        // children()  // 的用法
        // find() // 的用法
        // // 例如：).children(); // 全部子节点
        // $("#test1").children("#test1"); //返回id为test1的子节点
        // $("#test").find("#test1"); //选中id为test后代中 id为test1的节点

        // // 3.父节点
        // parent()  // 的用法
        // parents() // 的用法
        // closest() // 的用法
        // 例如：
        // 节点案例：
        // $("#test1").parent(); // 父节点
        // $("#test1").parents(); // 全部父节点
        // $("#test1").parents(".mui-content");//返回class为mui-content的父节点
        // $("#test1").contents(); // 返回id为test里面的所有内容，包括节点和文本
        // $("#test1").contents("#test1"); //返回id为test里面的id为#test1的节点和文本

        // 4.兄弟节点
        // next()和nextAll()的用法
        // prev()和prevAll()的用法
        // siblings()的用法
        // 例如：
        // $("#test1").prev(); // 上一个兄弟节点
        // $("#test1").prevAll(); // 之前所有兄弟节点
        // $("#test1").next(); // 下一个兄弟节点
        // $("#test1").nextAll(); // 之后所有兄弟节点
        // $("#test1").siblings(); // 所有兄弟节点
        // $("#test1").siblings("#test2"); //返回id为test2的兄弟节点

        // 5. 过滤节点
        //     三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
        //     其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
        //     first() 方法返回被选元素的首个元素
        //     last() 方法返回被选元素的最后一个元素
        //     eq() 方法返回被选元素中带有指定索引号的元素
        //     filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
        // 下面的例子返回带有类名 "url" 的所有 < p > 元素：
        //     $(document).ready(function () {
        //         $("p").filter(".url");
        //     });
        //     not() 方法返回不匹配标准的所有元素, not() 方法与 filter() 相反
        // 返回不带有类名 "url" 的所有 < p > 元素:
        //     $(document).ready(function () {
        //         $("p").not(".url");
        //     });



        // 隐藏
        // $('button:last').click(function(){
        //     $('.box').hide()
        // })
        // // 显示或隐藏
        // $('button:eq(1)').click(function(){
        //     $('.box').toggle()
        // })
        // // 显示
        // $('button:first').click(function(){
        //     $('.box').show()
        // })



        $(document).ready(function () {
            $('.box1').click(function () {
                $('.box').animate({ width: '520px', height: '520px', opacity: '0.3' })
                $('.box').animate({ fontSize: '52px' })
            })
        })
    })
</script>

</html>